<template>
  <el-dialog
    :visible.sync="show"
    width="550px"
    top="10vh"
    :before-close="beforeClose"
    :close-on-click-modal="false"
  >
    <template #title>
      <h2 style="margin: 0; color: #333">{{ isEdit ? '修改车位' : '添加车位' }}</h2>
    </template>
    <el-form
      :model="form"
      ref="formRef"
      label-width="70px"
      :rules="rules"
      style="margin-bottom: 20px"
    >
      <el-form-item label="建筑" prop="buildingLocation">
        <el-input v-model="form.buildingLocation" placeholder="请输入停车位所在建筑位置"></el-input>
      </el-form-item>

      <el-form-item label="楼层" prop="floor">
        <el-input v-model="form.floor" placeholder="请输入停车位所在楼层"></el-input>
      </el-form-item>

      <el-form-item label="区域" prop="area">
        <el-input v-model="form.area" placeholder="请输入停车位所在区域"></el-input>
      </el-form-item>

      <el-form-item label="编号" prop="space_number">
        <el-input v-model="form.spaceNumber" placeholder="请输入车位编号"></el-input>
      </el-form-item>

      <el-form-item label="包月" prop="isMonthly">
        <el-radio-group v-model="form.isMonthly">
          <el-radio border :label="0">非包月</el-radio>
          <el-radio border :label="1">包月</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="价格" prop="price">
        <el-input-number
          v-model="form.price"
          :min="0"
          :step="0.01"
          :precision="2"
          placeholder="请输入租金价格"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <div slot="footer" style="padding-right: 10px">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addParkingSpaceApi, updateParkingSpaceApi } from '@/api/parkingSpace'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    editRow: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    isEdit() {
      return !!this.editRow.id
    }
  },
  watch: {
    show(value) {
      if (value && this.editRow.id) {
        this.form = { ...this.editRow }
      }
    }
  },
  data() {
    return {
      form: {
        id: null,
        buildingLocation: '缤纷城',
        floor: '地下2层',
        area: 'A区',
        spaceNumber: '101',
        isMonthly: 0,
        price: 250
      },
      rules: {
        buildingLocation: [
          { required: true, message: '请输入停车位所在建筑位置', trigger: 'blur' }
        ],
        floor: [{ required: true, message: '请输入停车位所在楼层', trigger: 'blur' }],
        area: [{ required: true, message: '请输入停车位所在区域', trigger: 'blur' }],
        spaceNumber: [{ required: true, message: '请输入车位编号', trigger: 'blur' }],
        isMonthly: [{ required: true, message: '请选择是否为包月车位', trigger: 'change' }],
        price: [{ required: true, message: '请输入车位租金价格', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 提交表单
    submitForm() {
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          let res
          if (this.isEdit) {
            res = await updateParkingSpaceApi(this.form)
          } else {
            res = await addParkingSpaceApi(this.form)
          }
          if (res.success) {
            this.$message.success(this.isEdit ? '修改成功！' : '添加成功！')
            // 关闭弹窗
            this.beforeClose()
            this.$emit('close', { update: true })
          }
        }
      })
    },
    closeDialog() {
      this.beforeClose()
      this.$emit('close', { update: false })
    },
    beforeClose() {
      this.$refs.formRef.clearValidate()
      this.$emit('update:show', false)
      this.resetForm()
    },
    // 重置表单
    resetForm() {
      this.form = { ...this.$options.data().form }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-radio {
  margin-right: 0;
}
</style>
